<template>
  <div :loading="dataListLoading">
    <div class="panel-container">
      <div class="panel-title">外部联系人</div>
      <BarChart2 :chart-data="UserCountData"></BarChart2>
    </div>
    <!--明细数据-->
    <div class="panel-container">
      <div class="panel-title">明细数据</div>
      <!--选择员工-->
      <el-form size="mini" ref="form" :model="form" label-width="100px">
        <el-form-item size="mini" label="选择员工：">
          <el-select v-model="form.user_id" placeholder="请选择" @change="handleChange">
            <el-option v-for="item in userOption" :key="item.id" :label="item.nickname" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-table :data="dataList" size="mini" :header-cell-style="{ background: '#F5F5F5', color: '#000000' }" ref="table" style="width: 100%" v-loading="dataListLoading">
        <el-table-column align="center" header-align="center" label="序号" type="index" width="100"></el-table-column>
        <el-table-column align="center" header-align="center" label="名称" prop="name"></el-table-column>
        <el-table-column align="center" header-align="center" label="头像" prop="header">
          <template slot-scope="scope">
            <img :src="scope.row.header" class="avatar" />
          </template>
        </el-table-column>
        <el-table-column align="center" header-align="center" label="备注" prop="remark"></el-table-column>
        <el-table-column align="center" header-align="center" label="备注手机号" prop="remark_mobiles">
          <template slot-scope="scope">
            <span>{{ handleRemarkMobiles(scope.row.remark_mobiles) }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" header-align="center" label="类型" prop="user_type">
          <template slot-scope="scope">
            <span v-if="scope.row.user_type === 1">微信用户</span>
            <span v-if="scope.row.user_type === 2">企微用户</span>
          </template>
        </el-table-column>
        <el-table-column align="center" header-align="center" label="性别" prop="gender">
          <template slot-scope="scope">
            <span v-if="parseInt(scope.row.gender) === 0">未知</span>
            <span v-if="parseInt(scope.row.gender) === 1">男性</span>
            <span v-if="parseInt(scope.row.gender) === 2">女性</span>
          </template>
        </el-table-column>
        <el-table-column align="center" header-align="center" label="职位" prop="position"></el-table-column>
        <el-table-column align="center" header-align="center" label="所在企业" prop="corp_name"></el-table-column>
        <el-table-column align="center" header-align="center" label="添加时间" prop="add_time"></el-table-column>
      </el-table>
      <el-pagination
        small
        background
        :current-page="pageIndex"
        :page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="totalPage"
        @current-change="currentChangeHandle"
        @size-change="sizeChangeHandle"
        layout="total, sizes, prev, pager, next, jumper"
        style="margin-top: 20px; text-align: right"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import BarChart2 from './BarChart2'
import LineChart from './LineChart'

import { apiUserSelect, apiUserCount, apiUserList } from '@/api/wxapplet'
import { formatFormData } from '@/utils/index'
export default {
  name: 'index',
  components: { LineChart, BarChart2 },
  data() {
    return {
      dataListLoading: false,
      form: {
        user_id: '',
      },
      userOption: [],
      UserCountData: {},
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
    }
  },
  mounted() {
    this.getUserCount()
    this.getUserSelect()
  },
  methods: {
    // 获取用户下拉
    getUserSelect() {
      apiUserSelect().then((res) => {
        this.userOption = res.data
        if (this.userOption[0]) {
          this.form.user_id = this.userOption[0].id
          this.getDataList()
        }
      })
    },
    // 获取用户图表
    getUserCount() {
      apiUserCount().then((res) => {
        const { data } = res
        const x = data.reverse().map((item) => {
          return item.nickname
        })
        const y = data.map((item) => {
          return item.total
        })
        this.UserCountData = { x, y }
      })
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true
      const formData = formatFormData(Object.assign({ pageNumber: this.pageIndex, pageSize: this.pageSize }, this.form))
      apiUserList(formData)
        .then((res) => {
          const { items, total } = res.result
          this.dataList = items
          this.totalPage = total
          this.dataListLoading = false
        })
        .catch((e) => {
          this.dataList = []
          this.totalPage = 0
          this.dataListLoading = false
        })
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    },
    // 选择用户
    handleChange() {
      this.pageIndex = 1
      this.getDataList()
    },
    // 格式化备注手机号
    handleRemarkMobiles(phone) {
      return phone.replace(/\'|\[|\]/g, '')
    },
  },
}
</script>

<style scoped lang="scss">
.panel-2 {
  .panel-title {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .desc {
      margin-left: 10px;
      font-size: 14px;
      color: #909399;
      font-weight: normal;
    }
  }
  .list {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    line-height: 2;
    .item {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      width: 20%;
      .num-1 {
        font-size: 30px;
        font-weight: bold;
        color: #409eff;
      }
      .label {
      }
      .num-2 {
        color: #909399;
      }
    }
  }
}
.el-icon-top {
  font-weight: bold;
  color: #67c23a;
}
.el-icon-bottom {
  font-weight: bold;
  color: #f56c6c;
}
.el-icon-none {
  font-weight: bold;
}
.avatar {
  width: 60px;
  height: 60px;
}
</style>
